<template>
  <div class="navbar">
    <hamburger
      v-if="!notLeftMenu"
      id="hamburger-container"
      :is-active="isActive"
      class="hamburger-container"
      @toggleClick="toggleSideBar"
    />
    <breadcrumb
      v-if="!notLeftMenu"
      id="breadcrumb-container"
      class="breadcrumb-container"
    />
    <div v-if="notLeftMenu" class="left-menu">
      <img class="left-menu-item" src="@/assets/logo.png" />
      <span :style="{ color: '#0096fa' }">
        {{ title }}
      </span>
    </div>
    <div class="right-menu">
      <search id="header-search" class="right-menu-item" />
      <remind
        id="remind-message"
        class="right-menu-item hover-effect"
        style="font-size: 19px"
      />
      <div class="right-menu-item hover-effect avatar-container">
        <el-dropdown class="dropdown">
          <div class="avatar-wrapper">
            <div class="user-avatar"><avatar :src="userInfo.avatar" /></div>
            <span class="user-name">{{ userInfo.doctorName }}</span>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <!-- <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>切换医院</el-dropdown-item> -->
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>
<script>
  import Hamburger from '@/components/Hamburger'
  // import Breadcrumb from '@/components/Breadcrumb'
  import search from '@/components/HeaderSearch'
  import remind from '@/components/RemindMessage'
  import { useStore } from 'vuex'
  import { computed } from '@vue/runtime-core'
  import { useRouter, useRoute } from 'vue-router'
  export default {
    name: 'Navbar',
    components: { Hamburger, search, remind },
    props: {
      notLeftMenu: {
        type: Boolean,
        default: false,
      },
    },
    setup() {
      const store = useStore()
      const toggleSideBar = function () {
        store.dispatch('app/toggleSideBar')
      }
      const isActive = computed(() => {
        return store.getters.sidebar.opened
      })
      const userInfo = computed(() => {
        return store.getters.userInfo
      })
      const title = computed(() => {
        return process.env.VUE_APP_NAME || '全病程管理系统'
      })

      const router = useRouter()
      const route = useRoute()
      const logout = async function () {
        await store.dispatch('user/logout')
        router.push(`/login?redirect=${route.fullPath}`)
      }
      const clickHubs = function (val) {
        console.log(val)
      }
      return {
        toggleSideBar,
        isActive,
        logout,
        clickHubs,
        userInfo,
        title,
        // avatar,
      }
    },
  }
</script>
<style lang="scss" scoped>
  .navbar {
    height: 50px;
    overflow: hidden;
    position: relative;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 21, 42, 0.08);

    .hamburger-container {
      line-height: 46px;
      height: 100%;
      float: left;
      cursor: pointer;
      transition: background 0.3s;
      -webkit-tap-highlight-color: transparent;

      &:hover {
        background: rgba(0, 0, 0, 0.025);
      }
    }

    .breadcrumb-container {
      float: left;
    }
    .left-menu {
      float: left;
      height: 100%;
      line-height: 50px;
      margin-left: 5px;
      font-weight: bold;

      .left-menu-item {
        display: inline-block;
        padding: 0 8px;
        font-size: 18px;
        color: #5a5e66;
        vertical-align: middle;
        height: 80%;
        color: #0096fa;
      }
    }

    .right-menu {
      float: right;
      height: 100%;
      line-height: 50px;

      &:focus {
        outline: none;
      }

      .right-menu-item {
        display: inline-block;
        padding: 0 8px;
        font-size: 18px;
        color: #5a5e66;
        vertical-align: text-bottom;

        &.hover-effect {
          cursor: pointer;
          transition: background 0.3s;

          &:hover {
            background: rgba(0, 0, 0, 0.025);
          }
        }
      }

      .avatar-container {
        height: 100%;
        :deep(.dropdown) {
          line-height: unset !important;

          .avatar-wrapper {
            margin: auto 0px;
            display: flex;
            align-items: center;
            .user-avatar {
              cursor: pointer;
              width: 40px;
              height: 40px;
              border-radius: 10px;
            }
            .user-name {
              cursor: pointer;
              font-size: 12px;
              white-space: nowrap;
              margin: auto 12px;
            }
          }
        }
      }
    }
  }
</style>
